import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import css from './index.less';
import 'common/less/animate.css';
import TRANSITION_CONST from 'common/const/transition';

@observer

export default class Video extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    onClick: (e) => {
      // e.stopPropagation();
    },
  };

  setTransition() {
    const { mod } = this.props;
    let animation = null;
    TRANSITION_CONST.forEach(tran => {
      if (mod[tran.key].key.length) {
        animation = '';
        animation += ` ${mod[tran.key].key} ${mod[tran.key].duration}s ${mod[tran.key].delay}s`;
      }
    });
    return animation;
  }

  render() {
    const { mod, ...other } = this.props;
    let animation = this.setTransition();
    const props = {
      className: css.video,
      src: mod.src,
      style: {
        ...mod.style,
        animation: animation ? animation : null
      },
      controls: mod.isControls,
      loop: mod.isLoop,
      autoPlay: mod.isAutoplay,
      ...other,
    };
    return (
      <video {...props} />
    );
  }
}
